<template>
    <div class="header">
        <div class="header-collapse">
            <el-tooltip class="box-item" effect="dark" content="折叠侧边栏" placement="bottom-start">
            <el-icon :size="20" @click="checkCollapse">
                <Expand v-if="isCollapse" />
                <Fold v-else />
            </el-icon>
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="打开全屏" placement="bottom-start">
                <el-icon :size="20" @click="checkFullScreen">
                    <FullScreen />
                </el-icon>
            </el-tooltip>
        </div>
        <div class="information">
            <el-dropdown placement="bottom-end" class="drop-info">
                <div class="user-name">
                    <img src="../static/frame/header.jpg" alt="">
                    <p>User</p>
                </div>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>个人信息</el-dropdown-item>
                        <el-dropdown-item>修改密码</el-dropdown-item>
                        <el-dropdown-item>退出</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useStore } from 'vuex'
const isCollapse = ref(false)
const store = useStore()

const fullscreen = false

// 侧边栏折叠打开按钮
const checkCollapse = () => {
    isCollapse.value = !isCollapse.value
    store.dispatch('changeCollapse', isCollapse.value)
}

// 打开退出全屏
const checkFullScreen = () => {
    let element = document.documentElement
    if (fullscreen) {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
    } else {
        if (element.requestFullscreen) {
            element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
            element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
            // IE11
            element.msRequestFullscreen();
        }
    }
    fullscreen = !fullscreen
}
</script>

<style lang="scss" scoped>
.header {
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    border-bottom: 1px solid #ddd;
    background-image: url('../static/frame/background.png');
    background-size: 100% 100%;

    .header-collapse {
        .el-icon {
            margin-right: 20px;
        }
    }

    .information {

        .drop-info {
            cursor: pointer;

            :deep() {
                .el-tooltip__trigger:focus {
                    outline: none;
                }
            }

        }

        .user-name {
            display: flex;
            align-items: center;

            img {
                width: 30px;
                height: 30px;
                border-radius: 50%;
                margin-right: 10px;
            }
        }
    }
}
</style>